<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<div :style="{'padding-top': statusBarHeight}">
			
		</div>
		<!--胶囊-->
		<div class="head-container" :style="{'height': capsuleHeight}">
			<wd-icon @click="jumpBack" color="#fff" name="thin-arrow-left" size="18px"></wd-icon>
			<div>AI纠错</div>
			<div style="width: 18px;"></div>
		</div>
		<!--题目主体-->
		<div class="tabbarpage-body scroll-container" >
			<!--题目-->
			<div class="scroll-line-container">
				<div class="line-header">题目：</div>
				<!--标签-->
				<div class="tags-container">
					<div style="flex: 1;">
						
					</div>
					<div class="tag" v-for="item in quesDetail.tags">
						{{ item }}
					</div>
				</div>
				<textarea auto-height v-if="changeMode" maxlength="-1" v-model="quesDetail.quesContent" class="textarea"></textarea>
				<div v-else>
					{{ quesDetail.quesContent }}
				</div>
			</div>
			<!--用户作答-->
			<div class="scroll-line-container dark-purple-card card-container">
				<div class="line-header">您的作答：</div>
				<textarea auto-height v-if="changeMode" maxlength="-1" v-model="quesDetail.usrAnswer" class="textarea"></textarea>
				<div v-else>{{ quesDetail.usrAnswer }}</div>
			</div>
			<!--标准答案-->
			<div class="scroll-line-container dark-purple-card card-container">
				<div class="line-header">标准答案：</div>
				<textarea auto-height v-if="changeMode" maxlength="-1" v-model="quesDetail.quesAnswer" class="textarea"></textarea>
				<div v-else>{{ quesDetail.quesAnswer }}</div>
			</div>
			<!--AI分析-->
			<div class="scroll-line-container dark-purple-card card-container">
				<div class="line-header">AI分析：</div>
				{{ quesDetail.aiComment }}
			</div>
			<!--用户记录-->
			<div class="scroll-line-container dark-purple-card card-container">
				<div class="line-header">错题记录：</div>
				<textarea auto-height v-if="changeMode" maxlength="-1" v-model="quesDetail.usrComment" class="textarea"></textarea>
				<div v-else>{{ quesDetail.usrComment }}</div>
			</div>
			<div v-if="changeMode">
				<wd-button>确认更改</wd-button>
			</div>
			<!--底部填充-->
			<div class="scroll-line-container" style="margin-bottom: 52px;">
				
			</div>
		</div>
		<!--时间&按钮：（加强训练）/更改/删除-->
		<div class="control-container">
			<div class="time">{{ quesDetail.addTime }}</div>
			<div style="flex: 0.76;"></div>
			<wd-button size="small" @click="aiRecommand">智能推荐</wd-button>
			<wd-button size="small" @click="changeChangeMode" v-if="!changeMode" type="info">更改</wd-button>
			<wd-button size="small" @click="changeChangeMode" v-else type="info">取消</wd-button>
			<wd-button size="small" type="error">删除</wd-button>
		</div>
		<!--AI助手-->
		<div class="ai-btn" @click="changeAiCardHide">AI</div>
		<transition name="fade">
			<QuesAiCard :quesId="quesDetail.quesId" @hide="changeAiCardHide" class="ai-card-self" v-if="aiCardShow"></QuesAiCard>
		</transition>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
				changeMode: false,
				aiCardShow: false,
		        quesDetail: {
		            quesId: 1,
					addTime: '2024/04/01 13:48',
		            quesContent: `Title: China's Urbanization Journey
		
					China's rapid urbanization over the past few decades has been nothing short of remarkable. As the world's most populous country, it has experienced an unprecedented shift from rural to urban living, with millions migrating to cities in search of better opportunities.
					
					This massive urbanization has led to both opportunities and challenges. On one hand, it has spurred economic growth, fueled by the concentration of industries, businesses, and skilled labor in urban centers. Cities like Beijing, Shanghai, and Guangzhou have become global economic powerhouses, attracting investment and fostering innovation.
					
					However, rapid urbanization has also strained infrastructure and resources. Overcrowded cities face issues such as traffic congestion, pollution, and inadequate public services. The influx of rural migrants has put pressure on housing and social welfare systems, exacerbating income inequality and social tensions.
					
					To address these challenges, the Chinese government has implemented various policies and initiatives. These include investments in public transportation, environmental protection measures, and efforts to promote sustainable urban development. Additionally, policies aimed at improving rural education and healthcare seek to reduce the urban-rural divide and encourage balanced regional growth.
					
					Despite the complexities and obstacles, China's urbanization journey continues to evolve. With careful planning and innovative solutions, it has the potential to shape a more prosperous and sustainable future for its citizens.
					
					Questions:
					1. What has China experienced over the past few decades?
					   A) Rapid urbanization
					   B) Decline in population
					   C) Increase in rural living
					   D) Decrease in economic growth
					
					2. Which of the following cities has NOT become a global economic powerhouse due to urbanization?
					   A) Beijing
					   B) Shanghai
					   C) Guangzhou
					   D) Chengdu
					
					3. What challenges does rapid urbanization pose to Chinese cities?
					   A) Decreased pollution
					   B) Improved public services
					   C) Traffic congestion
					   D) Reduced income inequality
					
					4. How is the Chinese government addressing urbanization challenges?
					   A) By neglecting public transportation
					   B) Through investments in sustainable development
					   C) By promoting rural migration
					   D) Through increased income inequality
					
					5. What is the potential outcome of China's urbanization journey?
					   A) Increased social tensions
					   B) Decline in economic growth
					   C) More sustainable and prosperous future
					   D) Decrease in population migration`,
					tags: ['阅读题', '粗心易错'],
		            quesAnswer: '1.A; 2.B; 3.C; 4.D; 5.A;',
		            usrAnswer: '1.A; 2.B; 3.D; 4.A; 5.B;',
		            aiComment: `用户在第三题的答案选择出现错误。
					
					原因分析：可能是用户没有仔细阅读题目或者理解题意不清楚。
					改进建议：建议用户在作答之前仔细阅读每个问题，确保理解题意并准确选择答案。
					
					用户在第四题的答案选择也出现错误。
					
					原因分析：可能是用户对中国政府的应对措施理解有偏差或者不清楚相关政策。
					改进建议：建议用户在回答政策类问题时，了解相关政府政策或者通过阅读更多资料来加深对政策的理解。
					
					AI评论应提供针对用户错误的解释和指导。
					
					改进建议：AI评论可以根据用户的错误提供针对性的建议，例如提醒用户在答题时要注意仔细阅读题目、理解题意、确认答案等。同时，也可以建议用户在答题前先确认自己对相关知识的掌握程度，必要时可以进行更深入的学习和思考。`,
					usrComment: '实验数据',
		        }
		    }
		},
		onLoad(props) {
			this.quesDetail.quesId = props.quesId
		},
		methods: {
			changeAiCardHide(){
				this.aiCardShow = !this.aiCardShow
			},
			aiRecommand(){
				uni.navigateTo({
					url: '/pages/QuesSimilarPage/QuesSimilarPage?quesId='+this.quesDetail.quesId
				})
			},
			changeChangeMode(){
				this.changeMode = !this.changeMode
			}
		}
	}
</script>

<script setup>
	import QuesAiCard from '@/components/QuesAiCard.vue'
	import { ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	const jumpBack = ()=>{
		uni.navigateBack()
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.head-container{
		display: flex;
		align-items: center;
		margin: 0 16px;
		justify-content: space-between;
		color: #fff;
		width: calc(100% - 32px);
		letter-spacing: 1px;
	}
	.control-container{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: #888888bb;
		padding: 4px 8px 12px 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		animation: bottom-in-ani .6s 1;
	}
	.control-container .time{
		color: #fff;
		font-size: 12px;
		white-space: nowrap;
		margin-left: 4px;
	}
	/*题目主体*/
	.scroll-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px 8px 8px 8px;
		overflow-x: hidden;
		overflow-y: scroll;
		position: relative;
		width: calc(100% - 16px);
	}
	.scroll-line-container{
		color: #fff;
		width: 100%;
		white-space: pre-line;
		word-break: break-all;
		margin-bottom: 12px;
	}
	.scroll-line-container .line-header{
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 18px;
		margin-bottom: 12px;
	}
	.scroll-line-container .tags-container{
		position: absolute;
		right: 0;
		top: 12px;
		height: 28px;
		width: calc(100% - 80px);
		display: flex;
		align-items: center;
	}
	.tags-container .tag{
		background-color: #4942ad;
		padding: 4px 8px;
		font-size: 13px;
		margin-right: 8px;
		border-radius: 4px;
		margin-left: -2px;
	}
	.scroll-line-container .textarea{
		width: calc(100% - 16px);
		min-height: 28px;
		height: auto;
		background-color: #ffffff11;
		padding: 8px;
		z-index: 0;
		white-space: pre-line;
	}
	.bottom-container{
		width: 100%;
		height: 80px;
		background-color: #fff;
	}
	.card-container{
		padding: 12px;
		width: calc(100% - 24px);
		border-radius: 8px;
	}
	.ai-btn{
		position: fixed;
		bottom: 80px;
		right: 20px;
		width: 48px;
		height: 48px;
		color: #fff;
		background: linear-gradient(to right bottom, #d656d488, #2341ad66);
		backdrop-filter: blur(4px);
		border-radius: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		letter-spacing: 2px;
	}
</style>
